<template>
    <div>
        <h1>组件事件emit</h1>
        <p>在在组件的模板表达式中，可以直接使用 $emit 方法触发自定义事件。</p>
        <p>像组件与 prop 一样，事件的名字也提供了自动的格式转换。注意这里我们触发了一个以小驼峰形式命名的事件，但在父组件中可以使用‘-’的形式命名来监听。与prop 大小写格式一样</p>
        <p>父组件可以通过 v-on (缩写为 @) 来监听事件</p>
        <p>或者，也可以用一个组件方法来作为事件处理函数</p>
        <SonDemo8 :user msg="信息message" @son-emit="emitHandler"></SonDemo8>
        <SonDemo10 :user msg="信息message" @son-emit="emitHandler" @son-emit2="emitHandler2"></SonDemo10>
        <Study1DiyDemo2 @in-focus="inFocusHandler"></Study1DiyDemo2>
        <SonDemo11 :user @submit="submitHandler"></SonDemo11>
        <SonDemo12 :user @edit-user="editUserHandler"></SonDemo12>
    </div>
</template>

<script lang="ts">
export default {
    name: 'diyDemo43'
}
</script>

<script setup lang='ts'>
import SonDemo8 from './components/SonDemo8.vue';
import { type Iuser } from './components/SonDemo8.vue';
import SonDemo10 from './components/SonDemo10.vue';
import Study1DiyDemo2 from '../study1/diyDemo2.vue';
import SonDemo11 from './components/SonDemo11.vue';
import SonDemo12 from './components/SonDemo12.vue';

import { ref } from 'vue';

const user = ref<Iuser>({
    name: '廖文静',
    sex: '女',
    age: 22
})

const emitHandler = (p1: number, p2: string, p3: { name: string }) => {
    console.log('此函数是由子组件使用emit触发调用的。', `p1: ${p1}, p2: ${p2}, p3: ${JSON.stringify(p3)}`, p3);
}

const emitHandler2 = () => {
    console.log('@son-emit2="emitHandler2"');
}

const inFocusHandler = () => {
    console.log('inFocusHandler');
}

const submitHandler = () => {
    console.log('submitHandler');

}

// 这里的 user12 是作为参数传进来的，可以取任意名字
const editUserHandler = (user12: Iuser) => {
    console.log(user12, 'editUserHandler');

}



</script>

<style lang="scss" scoped></style>